文档 / 模板开发

可视化区块编辑器

站点运营者可以在应用后台(/adm-xxxxxxxx/visual/{pageKey}/{lang})对每个页面做可视化组装

三栏布局

┌─────────────┬───────────────────┬────────────────┐
│ 区块列表     │  实时预览          │  区块配置       │
│  · 增删排序  │  (桌面/手机切换) │  · 标题/类型    │
│  · 点击联动  │                   │  · 内容字段     │
│  · 数据绑定  │                   │  · 数据源绑定   │
└─────────────┴───────────────────┴────────────────┘

能力

  • 区块增删与排序:上移/下移,删除,新增(选择类型);
  • 实时预览:按区块类型渲染占位效果,桌面/手机宽度切换;点击预览里的区块联动选中左侧列表;
  • 人性化配置表单:标题、类型、内容字段(标题/描述/徽标/数组/HTML/图片)、数据源绑定(source/type_code/category_slug/limit/mode);
  • 保存:全量写回 page_blocks,刷新即持久化。

模板后台的"可视编辑"

平台后台模板编辑页内置全屏 TemplateVisualEditor(三 Tab 同步):

  • 🎨 可视组装:页面管理(增/删/切换)+ 区块管理 + 实时预览 + 配置表单;
  • 🌳 树形 JSON:树形展开/折叠、内联改键值、类型切换、增删复制;
  • 📄 原始 JSON:格式化 / 校验应用 / 复制。

三处共享同一数据源,切 Tab 自动同步。

给模板开发者的建议

  • 通用区块类型(hero/features/cta...)而非自定义类型,市场接受度更高;
  • 绑定数据源时给出合理的默认 limitmode
  • 提供 8 语言标题/描述,市场里多语言模板权重更高。